import React, { useMemo, useEffect, useState } from 'react';
import { NuiDlg, NuiBt, sleep, loc_tag, loc_tm, export_csv_file, cut_text, obj_str, InfoList, is_empty } from 'sui';
import { g_wsn } from 'db/state';

const g_log = [];
let g_block = false;

const put_log = (name, val, des) => {
    if (g_block) {
        return;
    }

    try {
        const v = {
            tm: loc_tm(new Date()),
            name: name,
            des: des,
            val: JSON.stringify(val),
        };

        g_log.push(v)

        if (g_log.length > 100) {
            g_log.shift();
        }
    }
    catch (err) {
        console.log(err);
    }
};

const DlgLog = ({ open, setOpen }) => {
    const [main, setMain] = useState();

    useEffect(() => {
        if (!open) {
            return;
        }

        g_block = true;

        sleep(300, () => {
            try {
                const tmp = [...g_log];
                const ret = [];

                for (let i = 0; i < tmp.length; i++) {
                    const d = tmp[i];
                    if (!d) {
                        continue;
                    }

                    if (!d.tm && !d.des && !d.name && !d.val) {
                        continue;
                    }

                    ret.push(d);
                }

                setMain(ret);

                g_block = false;
            }
            catch (err) {
                console.log(err);
                setMain(null);
                g_block = false;
            }
        });
    }, [open]);

    const getRow = useMemo(() => {
        if (is_empty(main)) {
            return null;
        }

        const ret = [{
            des: '时间',
            value: '操作',
            end: '值',
            ext: '描述',
        }];

        main.forEach(d => {
            ret.push({
                des: obj_str(d, "tm"),
                value: cut_text(d.name, 260),
                end: cut_text(d.val, 260),
                ext: cut_text(d.des, 260),
            });
        });

        return ret;

    }, [main]);

    const hcsv = () => {
        if (is_empty(main)) {
            return;
        }

        const col = [
            {name: '时间', key: 'tm'},
            {name: '操作', key: 'name'},
            {name: '值', key: 'val'},
            {name: '描述', key: 'des'},
        ];

        const c = col.map(d => d.name);
        const r = main.map(d => {
            const tmp = [];
            col.map(t => tmp.push(d[t.key]));
            return tmp;
        });

        export_csv_file(`${g_wsn()}_log_${loc_tag()}`, c, r);
    };

    const hclose = () => {
        setOpen(false);
    };

    return (
        <NuiDlg open={open} hcmd={hclose} title="日志" labk="关闭" width="lg">
            <NuiBt hcmd={hcsv}>导出</NuiBt>
            <div className="overflow-auto">
                <div style={{ height: "360px" }}>
                    <InfoList data={getRow} bd="border-b"/>
                </div>
            </div>
        </NuiDlg>
    );
};

export {put_log, DlgLog};
